<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Dimmer
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-segment piled @click="act">
        <sui-dimmer :active="act1" inverted>
          <sui-content>
            <sui-icon name="red heart" size="big"/>
          </sui-content>
        </sui-dimmer>
        <sui-comment-group minimal threaded>
          <sui-comment>
            <sui-comment-avatar src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-comment-content>
              <a href="" is="sui-comment-author">Girl</a>
              <sui-comment-metadata>
                <div>一分钟之前</div>
              </sui-comment-metadata>
              <sui-comment-text>生命以负熵为食</sui-comment-text>
              <sui-comment-actions>
                <sui-comment-action>回复</sui-comment-action>
              </sui-comment-actions>
            </sui-comment-content>
            <sui-comment-group>
              <sui-comment>
                <sui-comment-avatar src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
                <sui-comment-content>
                  <a href="" is="sui-comment-author">Girl</a>
                  <sui-comment-metadata>
                    <div>一分钟之前</div>
                  </sui-comment-metadata>
                  <sui-comment-text>生命以负熵为食</sui-comment-text>
                  <sui-comment-actions>
                    <sui-comment-action>回复</sui-comment-action>
                  </sui-comment-actions>
                </sui-comment-content>
              </sui-comment>
            </sui-comment-group>
          </sui-comment>
          <sui-comment>
            <sui-comment-avatar src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-comment-content>
              <a href="" is="sui-comment-author">Girl</a>
              <sui-comment-metadata>
                <div>一分钟之前</div>
              </sui-comment-metadata>
              <sui-comment-text>生命以负熵为食</sui-comment-text>
              <sui-comment-actions>
                <sui-comment-action>回复</sui-comment-action>
              </sui-comment-actions>
            </sui-comment-content>
          </sui-comment>
          <sui-comment>
            <sui-comment-avatar src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-comment-content>
              <a href="" is="sui-comment-author">Girl</a>
              <sui-comment-metadata>
                <div>一分钟之前</div>
              </sui-comment-metadata>
              <sui-comment-text>生命以负熵为食</sui-comment-text>
              <sui-comment-actions>
                <sui-comment-action>回复</sui-comment-action>
              </sui-comment-actions>
            </sui-comment-content>
          </sui-comment>
          <sui-form>
            <textarea/>
            <sui-button
              content="回复"
              primary
              label-position="left"
              icon="edit"
            />
          </sui-form>
        </sui-comment-group>
      </sui-segment>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Dimmer',
  data () {
    return {
      act1: 1
    }
  },
  methods: {
    act () {
      if (this.act1 === 0) {
        this.act1 = 1
      } else {
        this.act1 = 0
      }
    }
  }
}
</script>

<style scoped>

</style>
